<template>
  <KiFormDialog
    :title="title"
    :show.sync="dialogVisible"
    v-model="info"
    @close="handleDialogClose"
  >
    <div v-if="info" class="text-18px">
      <h4>订单信息</h4>
      <template>
        <p>订单号：{{ info.orderId }}</p>
        <p>支付单号：{{ info.payNo }}</p>
        <p>商品名称：{{ info.productName }}</p>
        <p>数量：{{ info.quantity }}</p>
        <p>金额：{{ info.currentPrice | $cent2yuan }}</p>
        <p>订单状态：{{ info.orderStatusName }}</p>
        <p>支付状态：{{ info.payStatusName }}</p>
        <p v-if="info.businessTypeId == 1">
          票务状态：{{ info.thirdStatusName }}
        </p>
        <p>预订人姓名：{{ info.purchaserName }}</p>
        <p>预订人手机：{{ info.purchaserPhone }}</p>
      </template>

      <h4>店铺信息</h4>
      <p>店铺联系人：{{ info.belongSubMerchantContract }}</p>
      <p>
        手机号：{{ info.belongSubMerchantPhone }}
        <el-button
          style="width: 116px"
          :disabled="countdown !== 60"
          @click="sendCode"
        >
          {{ countdown === 60 ? '发送验证码' : `${countdown}s重试` }}
        </el-button>
      </p>
      <p>
        手机验证码：
        <el-input
          class="!w-200px"
          v-model="code"
          placeholder="请输入验证码"
        ></el-input>
      </p>
      <h4>确认退款</h4>
      <p>
        请输入：“我确定退款”
        <el-input
          class="!w-300px"
          v-model="refuseReason"
          placeholder
        ></el-input>
      </p>
    </div>
    <span slot="footer">
      <el-button @click="dialogVisible = false">取消</el-button>
      <el-button type="primary" @click="confirm" :loading="inRequest">
        确定
      </el-button>
    </span>
  </KiFormDialog>
</template>
<script>
import API from './api'

export default {
  components: {},
  data () {
    return {
      dialogVisible: false,
      orderId: '',
      code: '',
      inRequest: false,
      info: null,
      status: '',
      refuseReason: '',
      businessTypeId: '',
      countdown: 60,
      setinter: null
    }
  },
  computed: {
    title () {
      return '退款'
    }
  },
  methods: {
    open (row) {
      clearInterval(this.setinter)
      this.countdown = 60
      this.refuseReason = ''
      this.code = ''
      this.orderId = row.orderId
      this.status = row.status
      this.businessTypeId = row.businessTypeId
      this.dialogVisible = true

      API.getOrderInfo({
        orderId: row.orderId
      }).then(({ data }) => {
        this.info = data
      })
    },
    sendCode () {
      const { belongSubMerchantPhone } = this.info
      API.refundPhoneValidatorCode({
        orderId: this.orderId,
        belongSubMerchantPhone: belongSubMerchantPhone
      })
        .then(({ data }) => {
          this.$swal.success('操作成功')
        })
        .catch(err => {
          // 接口重新获取倒计时
          const num = err.message.replace(/[^0-9]/gi, '')
          this.countdown = num
        })
      // 开始倒计时
      this.setinter = setInterval(() => {
        this.countdown--
        if (this.countdown <= 0) {
          clearInterval(this.setinter)
          this.countdown = 60
        }
      }, 1000)
    },
    handleDialogClose () {
      clearInterval(this.setinter)
      this.countdown = 60
    },
    confirm () {
      if (!this.code) {
        this.$swal.error('验证码不能为空')
        return
      }
      if (!this.refuseReason) {
        this.$swal.error('请填入退款原因')
        return
      }
      if (this.refuseReason != '我确定退款') {
        this.$swal.error('请输入：“我确定退款”')
        return
      }
      this.inRequest = true
      API.refund({
        orderId: this.orderId,
        reason: this.refuseReason,
        code: this.code
      })
        .then(({ data }) => {
          this.$swal.success('操作成功')
          this.$emit('save')
          this.dialogVisible = false
          this.inRequest = false
        })
        .catch(() => {
          this.inRequest = false
        })
    }
  }
}
</script>
